<template>
	<view class="page">
		<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor="#fff" placeholder></up-navbar> -->
		<view class="content padding-30 box-sizing">
			<!-- <view class="flex width-full space-between fontSize-28">
				<view class="flex weight-700">
					每组词量({{headInfo.everyGroup}}个)<view class="width-10"></view> <up-icon @click="iconClick" name="setting" color="#2835d6" size="16"></up-icon>
				</view>
				<view class="">
					今日已刷：{{headInfo.finishWord}}/{{headInfo.totalWord}}   生词：{{headInfo.unknowWord}}
				</view>
			</view> -->
			<!-- <view class="flex width-full marginTop-30">
				<view class="width-full">
					<view class="marginBottom-10 width-full flex space-between fontSize-28">
						<view class="">
							今日任务：{{headInfo.currentGroup}}组/{{headInfo.totalGroup}}组
						</view>
						<view class="">
							已熟悉词：{{headInfo.currentGroup}}
						</view>
					</view>
					<up-line-progress activeColor = "#6dacf9" :showText="false" :percentage="Math.ceil((parseInt(headInfo.currentGroup)/parseInt(headInfo.totalGroup))*100)" height="8"></up-line-progress>
				</view>
			</view> -->
			<view class="wordsContent marginTop-30 marginBottom-30 flex column">
				<!-- <view class="fontSize-26 weight-700">
					{{emitData.subscript}}区生词({{emitData.sheng}}个)
				</view> -->
				<view @click="activeWords(item,index)" style="min-height: 130rpx;"
					class="relative  marginBottom-10 padding-30 box-sizing paddingLeft-30 paddingRight-30 borderRadius-10 width-full flex space-between items-center"
					v-for="(item,index) in domList" :key="index" :class="item.isCurrent?'bgcedfffd':''">
					<view class="fontSize-30 weight-700 width-full flex flex-start marginBottom-20 ">
						<view class="fontSize-30 weight-700">
							{{parseInt(index)+1}}.{{item.wordHead}}
						</view>
						<view class="fontSize-24">
							{{item.phone}}
						</view>
					</view>
					<view class="width-full" v-if="item.isKnow!=1&&item.isKnow!=3&&Object.keys(activeData).length>0">
						<view class="wordsDefaultText fontSize-24 "
							:class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'">
							<view class="marginBottom-5" v-for="(t,i) in returnVal(item.tran)" :key="i">
								{{t}}
							</view>
						</view>
						<!-- <view class="wordsDefaultText fontSize-24" :class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'" v-html="returnVal(item.tran)"></view> -->
						<!-- <span v-if="type==2&&!activeData[index]&&defaultActive&&index<defaultActive">{{item.aa}}</span> -->
					</view>
				</view>
			</view>

		</view>
		<view class="width-full box-sizing btns flex column items-center flex-center">
			<view v-if="overShow" class=" flex flex-center" style="width: 80vw;">
				<up-button @click="know" size="normal" type="success" text="熟悉词"></up-button>
				<view class="" style="width: 30%;height: 100%;"></view>
				<up-button @click="noKnow" size="normal" type="error" text="陌生词"></up-button>
			</view>
			<view v-if="!overShow" class=" flex flex-center" style="width: 80vw;">
				<up-button @click="nextWord" size="normal" type="primary" :text="blockShow?'查看统计':'继续'"></up-button>
			</view>
			<!-- <view v-if="blockShow" class=" flex flex-center" style = "width: 80vw;">
				<up-button @click="block" size = "normal" type="primary"  text="返回"></up-button>
			</view> -->

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		inject
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	const timer = ref({})
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	innerAudioContext.onCanplay(() => {
		// console.log('可以播放l ');
	});
	innerAudioContext.onPlay((e) => {

		// console.log('音频播放事件', e);
	})
	innerAudioContext.onEnded((e) => {
		// console.log('音频自然播放结束事件', e);
	})
	const play = (i, time, word) => {
		if (true) {
			timer.value['t' + i] = setTimeout(() => {
				innerAudioContext.stop();
				innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${word}&type=1`;
				innerAudioContext.play();
			}, time);
		}
	}
	const clear = () => {
		if (timer.value) {
			let arr = Object.keys(timer.value)
			for (let s of arr) {
				console.log(timer.value[s])
				clearTimeout(timer.value[s]);
			}
		}

	}
	const playChain = (i, time, word) => {
		clear();
		play(i, time, word);
	}


	// const insertWordInfoApi = inject('insertMemoryWord');
	const reciteWordsApi = inject('insertMemoryWord');
	// const getWordList = inject('getWordList');
	const startMemoryApi = inject('startMemory');
	const memoryWordsApi = inject('memoryWords');
	const outMemoryWordApi = inject('outMemoryWord');

	const headInfo = ref({
		book_id: '',
		page: 1,
		everyGroup: null,
		totalWord: null,
		finishWord: null,
		unknowWord: null,
		totalGroup: null,
		currentGroup: 1
	})
	const type = ref(1); //1为陌生词2为熟悉词
	const defaultActive = ref(null);
	const replace = ref(false)
	const activeData = ref({});
	const knowIndex = ref(0)
	const list = ref([]);
	const param = ref({
		wbook_id: '',
		times_id: '',
		knowword: [],
		unknowword: [],
		currentword: ''
	})
	const blockShow = ref(false)
	const overShow = ref(false);
	const isExit = ref(true);
	const nextShow = ref(true);
	const currentPage = ref(0);
	const currentData = ref({})
	const domList = ref([])
	const emitData = ref({})
	const isOver = ref(false)
	onUnload(() => {
		console.log('onHideonHideonHideonHide')
		clear();
		if (isExit.value) {
			outMemoryWordApi().then(res => {
				console.log(22222222)
			})
		}
	})


	const setDomList = () => {
		let obj = list.value.slice(currentPage.value, parseInt(currentPage.value) + 1)[0]
		activeData.value[currentPage.value] = obj.wordId
		domList.value = [...domList.value, {
			...obj,
			isCurrent: true,
			isKnow: 0, //1熟悉词2陌生词
		}];
		clear();
		// 语音触发次数
		for (var i = 0; i < 3; i++) {
			play(i, i * 2000, obj.wordHead)
		}
		setCurrentData(obj);
		// if(currentPage.value>0){
		// 	updateKnowStatus();
		// }
	}
	const setCurrentData = (obj, isKnow = 0) => {

		currentData.value = {
			...obj,
			isCurrent: true,
			isKnow: isKnow, //1熟悉词2陌生词
		}
		if (currentPage.value > 0) {
			for (var i = 0; i < currentPage.value; i++) {
				if (i != currentPage.value) {
					domList.value[i].isCurrent = false
					domList.value[i].isKnow = 3
				}

			}
		}
	}
	const updateKnowStatus = (type) => {
		let k = parseInt(currentPage.value) - 1
		// for (var i = 0; i < currentPage.value; i++) {
		// 	if(i!=currentPage.value){
		clear();
		console.log(k, knowIndex.value, currentPage.value, 1111111)
		if (type == 2) {
			// 控制上限数量
			if (domList.value.length > 4 && !isOver.value) {
				list.value.splice(domList.value.length, list.value.length)
			} else if (!isOver.value) {
				list.value.splice(5, list.value.length)
			}
			isOver.value = true
			let t = domList.value[knowIndex.value]
			// 语音触发次数
			for (var i = 0; i < 3; i++) {
				play(i, i * 2000, t.wordHead)
			}
		}
		if (currentPage.value == knowIndex.value) {
			console.log(currentPage.value == knowIndex.value, 'currentPage.valuecurrentPage.value')
			domList.value[knowIndex.value].isKnow = type
			domList.value[knowIndex.value].isCurrent = false
			knowIndex.value = 0
			domList.value[currentPage.value].isCurrent = true
			nextShow.value = false
			overShow.value = false
			if (currentPage.value == list.value.length - 1) {
				blockShow.value = true
			}
		} else {
			domList.value[knowIndex.value].isKnow = type
			domList.value[knowIndex.value].isCurrent = false
			knowIndex.value++
			domList.value[knowIndex.value].isCurrent = true
		}

		// 	}
		// }
	}
	const know = () => {
		// let obj = domList.value[currentPage.value]
		// setCurrentData(1)
		updateKnowStatus(1);
	}
	const noKnow = () => {
		// let obj = domList.value[currentPage.value]
		// setCurrentData(obj,2)
		updateKnowStatus(2);
	}
	onLoad(() => {
		startMemoryApi().then(() => {});
		memoryWordsApi().then((res) => {
			console.log(res, 'listlist')
			list.value = res ? res : [];
			setDomList();
		})
		// getList();
	})


	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}

	const activeWords = (it, i) => {
		// if(activeData.value[i]){
		// 	delete activeData.value[i]
		// 	let list1 = Object.keys(activeData.value)
		// 	defaultActive.value = list1.length>0?list1[list1.length-1]:null
		// }else{
		// 	activeData.value[i] = it.wordId
		// 	defaultActive.value = i
		// }

	}
	const typeChange = (t) => {
		type.value = t
		activeData.value = {}
	}
	const insertWordInfo = (t) => {
		let para = {
			wbook_id: param.value.wbook_id,
			times_id: param.value.times_id,
			knowword: param.value.knowword.join(),
			unknowword: param.value.unknowword.join(),
			currentword: param.value.currentword
		}
		uni.showLoading()
		setTimeout(() => {
			uni.hideLoading()
		}, 2000)
		insertWordInfoApi(para).then(res => {
			activeData.value = {}
			defaultActive.value = null
			if (t == 2) {
				uni.redirectTo({
					url: '/pages/index/studyReport'
				})
			} else {
				headInfo.value.page++
				getList()
			}

		})
	}
	const btnClick = (t) => {
		let k = Object.keys(activeData.value)

		return
		if (k.length > 0) {
			param.value.currentword = list.value[list.value.length - 1].wordRank;
			let knowWord = []
			for (var i = 0; i < list.value.length; i++) {
				if (!activeData.value[i]) {
					knowWord = [...knowWord, list.value[i].wordId]
				}
			}
			if (type.value == 1) {
				param.value.unknowword = Object.values(activeData.value);
				param.value.knowword = knowWord;

			} else {
				param.value.unknowword = knowWord;
				param.value.knowword = Object.values(activeData.value);
			}
			insertWordInfo(t)
		} else {
			// if(type.value == 1){
			// 	param.value.unknowword = knowWord;
			// 	param.value.knowword = Object.values(activeData.value);

			// }else{
			// 	param.value.unknowword = Object.values(activeData.value);
			// 	param.value.knowword = knowWord;
			// }
			uni.showModal({
				title: '确认提示',
				content: `是否将本组单词全部标记为${type.value == 1?'熟悉词':'陌生词'}并继续下一组？`,
				success: function(res) {
					if (res.confirm) {
						let unList = [];
						for (var i = 0; i < list.value.length; i++) {
							unList = [...unList, list.value[i].wordId]
							if (i == list.value.length - 1) {
								param.value.currentword = list.value[list.value.length - 1].wordRank;
							}
						}
						if (type.value == 1) {
							param.value.unknowword = [];
							param.value.knowword = unList;

						} else {
							param.value.unknowword = unList;
							param.value.knowword = [];
						}
						insertWordInfo(t)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})

		}

		// setTimeout(()=>{
		// 	replace.value = false
		// },500)
	}

	const iconClick = () => {
		uni.navigateTo({
			url: '/pages/my/brushWordSetUp'
		})
	}
	const nextWord = () => {
		// btnClick(2)
		if (currentPage.value == list.value.length - 1 && !nextShow.value) {
			isExit.value = false
			reciteWords();
		} else {
			console.log(currentPage.value + 1, list.value.length,
				'currentPage.valuecurrentPage.valuecurrentPage.value')
			if (currentPage.value > 0 && currentPage.value == 1 && nextShow.value || currentPage.value > 0 && nextShow
				.value) {
				// currentPage.value++
				// setDomList()

				overShow.value = true
				domList.value[0].isCurrent = true
				domList.value[domList.value.length - 1].isCurrent = false
				domList.value[domList.value.length - 1].isKnow = 3
				// nextShow.value = false
			} else {
				currentPage.value++
				nextShow.value = true
				setDomList()


			}
			// nextShow.value = false
		}

		// uni.navigateBack() 
	}
	const reciteWords = () => {
		if (domList.value && domList.value.length > 0) {
			let remWords = []
			let unremWords = []
			for (let s of domList.value) {
				if (s.isKnow == 1) {
					remWords = [...remWords, s.wordId]
				} else {
					unremWords = [...unremWords, s.wordId]
				}
			}
			console.log(domList.value, 432)
			console.log(remWords.join(), 433)
			console.log(unremWords.join(), 434)
			return
			reciteWordsApi({
				knowword: remWords.join(),
				unknowword: unremWords.join(),
			}).then(res => {
				console.log(res, 'reciteWordsApireciteWordsApireciteWordsApi')
				// uni.navigateBack()

				uni.navigateTo({
					url: '/pages/index/rememberWordMemoryMaxTotal'
				})
			})
		}

	}
	const block = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.red {
		color: red;
	}

	.blue {
		color: #71da79;
	}

	.redBj {
		background-color: #ffbfbf;
	}

	.blueBj {
		background-color: #c1e5ff;
	}

	.btns {
		padding-bottom: calc(50rpx);
	}

	.wordsContent {
		z-index: 9;
	}

	.wordsDefaultText {
		scale: 1;
		z-index: -99999;
		display: flex;
		flex-direction: column;
	}

	@keyframes pulse {

		// from {
		//     opacity: 1.0;
		//   }
		0% {
			opacity: 0;
		}

		20% {
			opacity: 1.0;
		}

		40% {
			opacity: 0;
		}

		60% {
			opacity: 1.0;
		}

		80% {
			opacity: 0;
		}

		100% {
			opacity: 1.0;
		}

		// 70% {
		//   opacity: 0;
		// }
		// 80% {
		//   opacity: 1.0;
		// }
		// 90% {
		//   opacity: 0;
		// }
		// to {}
	}

	.bgcedfffd {
		background-color: #edfffd;
	}

	.boxBorder {
		transition: all .3s;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			// top: -10px;
			// left: -10px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #ffbfbf;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			// top: -10px;
			// left: -10px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #ffbfbf;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			animation: div5Ani 1s -0.5s linear;
		}

	}

	.boxBorder1 {
		transition: all .3s;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			// top: -0px;
			// left: -0px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #05b602;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			// top: -10px;
			// left: -10px;
			// right: -10px;
			// bottom: -10px;
			border: 2px solid #05b602;
			border-radius: 10px;
			animation: div5Ani 1s linear;
		}

		&::after {
			animation: div5Ani 1s -0.5s linear;
		}

	}

	@keyframes div5Ani {

		0%,
		100% {
			clip-path: inset(0 0 98% 0);
		}

		25% {
			clip-path: inset(0 98% 0 0);
		}

		50% {
			clip-path: inset(98% 0 0 0);
		}

		75% {
			clip-path: inset(0 0 0 98%);
		}
	}

	.wordsText {
		display: inline-block;
		z-index: 9;
		animation: pulse 2s linear;
	}

	.hiddenText {
		display: none;
		scale: 1;
	}
</style>